import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route, Routes, NavLink, Navigate } from 'react-router-dom'
import Login from './pages/Login'
import Home from './pages/Home'
import VisitorList from './pages/visitors/VisitorList';
import './App.css'
import Index from './pages/Index';
import NotFount from './pages/NotFount';
class App extends Component {
  state = {}
  render() {
    return (<>
      <h2>13.路由(yarn add react-router-dom)</h2>
      <Router>
        <nav>
          <h3>13.1导航：Link</h3>
          {/*  to等于字符串方式 */}
          {/* <Link to='/home'>首頁</Link> &nbsp;|&nbsp;
           <Link to='/login'>登录</Link> */}
          {/* <a href='/home'>首页</a>
           <a href='/login'>登录</a> */}
          {/* to以对象方式跳转 */}

          <Link to={{
            pathname: '/home',
            search: '?id=100',
            hash: '#the-hash',
            state: {
              name: 'zhangsan'
            }
          }}>首页</Link>
          <hr />
          <h3>13.2 导航：NavLink-设置激活状态</h3>
          {/* NavLink */}
          <h3> 1. 设置style行内样式</h3>
          <NavLink to='/login' style={({ isActive }) => {
            console.log('是否激活', isActive)
            return {
              color: isActive ? 'red' : 'pink'
            }
          }}>登录</NavLink> &nbsp;|&nbsp;<NavLink style={({ isActive }) => {
            console.log('是否激活', isActive)
            return {
              color: isActive ? 'red' : 'pink'
            }
          }} to='/home'>首頁</NavLink>
          {/* clasName */}
          <h3>2. 动态设置className的方式</h3>
          {/* <NavLink className={({isActive}) => isActive ? 'current' : 'pending' } to='/home'>首頁</NavLink> &nbsp;|&nbsp;
          <NavLink className={({isActive}) => isActive ? 'current' : 'pending' } to='/login'>登录页面</NavLink> 
            */}
          <h3>3. 新版本可直接把激活导航的class=active写在样式表里-控制激活状态</h3> 
          <NavLink to='/home'>首頁</NavLink> &nbsp;|&nbsp;
          <NavLink to='/login'>登录页面</NavLink>
          
          <h2>13.3 页面重定向</h2>
          {/* <Redirect /> 老版本*/}
           <h3>Navigate</h3>
           {/* <Route path='/'  element={<Navigate to='/index' replace />}></Route>  */}
                  

        </nav>
        <Routes>
          <Route path='/index' element={<Index />} />
          <Route path='/' element={<Navigate to='/index' replace />} />
          {/* <Route path='/' element={<Index />} /> */}
          {/* 
            路由跳转： push->    有历史记录
                       replace -> 没有历史记录
          */}
          
          {/* 默认都是精确匹配 */}
          <Route path='/login' element={<Login />} />
          <Route path='/home' element={<Home />} />
          <Route path='/list' element={<VisitorList />} />
          <Route path='/list/:id' element={<VisitorList />} />
          {/* <Route path='/list/:id/haha' element={<VisitorList />} /> */}
          <Route path='/list/*/haha' element={<VisitorList />} />
          {/* 模糊匹配 */}
          {/* <Route path='/list/*' element={<VisitorList />} /> */}
          {/* <Route path='/home1' element={<Home />}></Route> */}
          <Route path='*' element={<NotFount />}></Route>
        </Routes>
      </Router>

    </>
    );
  }
}


export default App;
